<template>
  <div class="personalApprove">
    <div class="topTitle">个人认证</div>
    <van-field v-model="personName" label="真实姓名：" />
    <van-field v-model="personNumber" label="身份证号：" />
    <van-field
      v-model="approveIntroMessage"
      rows="2"
      label="认证介绍："
      maxlength="30"
      type="textarea"
      placeholder="请输入您的认证介绍"
      show-word-limit
    />
    <div class="approveTitle">
      认证标签
      <span class="approveTitleTip">（最多选五个）</span>
    </div>
    <van-checkbox-group
      v-model="chooseResult"
      class="approveTagGroup"
      direction="horizontal"
      :max="5"
    >
      <van-cell-group class="approveTagCellGroup">
        <van-cell
          v-for="(item, index) in CheckboxTag"
          clickable
          :key="item"
          :title="`标签 ${item}`"
          @click="checkBoxToggle(index)"
          class="approveTagCell"
        >
          <template #right-icon>
            <van-checkbox
              :name="item"
              ref="checkboxes"
              shape="square"
              class="approveTagIcon"
            />
          </template>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
    <div class="approveTitle">手机号验证</div>
    <van-field
      v-model="telNum"
      center
      clearable
      label="手机号"
      placeholder="请输入手机号"
    >
      <template #button>
        <van-button size="small" type="primary">获取验证码</van-button>
      </template>
    </van-field>
    <van-field
      v-model="veryCode"
      type="digit"
      label="验证码"
      placeholder="请输入您收到的验证码"
    />
    <div class="headImg">
      <div class="head">头像</div>
      <van-image class="img" round fit="cover" :src="imgSrc" />
      <div class="btnTip">
        <van-uploader :after-read="uploaderHeadImg">
          <van-button plain type="primary" size="small" class="btn"
            >更换头像</van-button
          >
        </van-uploader>
        <span class="tip">清晰、健康、代表品牌形象，请勿使用二维码</span>
      </div>
    </div>
    <van-field
      v-model="nickName"
      label="昵称："
      placeholder="请输入昵称，例如（小鱼儿）"
    />
    <div class="approveTitle">手持身份证验证</div>
    <div class="identityCardImg">
      <van-uploader
        class="rightSide sideImg"
        :after-read="uploaderIdentCardRight"
      >
        <van-image class="img" fit="cover" :src="imgSrc" />
      </van-uploader>
      <span class="handleTip">手持身份证正面照片</span>
      <van-uploader
        class="reverseSide sideImg"
        :after-read="uploaderIdentCardLeft"
      >
        <van-image class="img" fit="cover" :src="imgSrc" />
      </van-uploader>
      <span class="handleTip">手持身份证反面照片</span>
    </div>
    <div class="addToFile">
      <span class="addToFileTitle">追加：</span>
      <van-button plain type="primary" class="addToFileBtn" @click="addTo"
        >添加</van-button
      >
      <span class="addToFileTip"
        >你还可以提交附加认证材料，包括但不限于各类等级证书、技能认证证书等，可以证明您能力和水平的材料。</span
      >
    </div>

    <div
      class="clickAddTo"
      v-for="(item, index) in addToApprove"
      :key="item.id"
    >
      <span class="addFileImg">材料：</span>
      <van-uploader class="img">
        <van-image fit="cover" :src="imgSrc" />
      </van-uploader>
      <van-field
        v-model="item.addToMessage"
        rows="2"
        maxlength="30"
        type="textarea"
        placeholder="说明内容(最多三十个字)"
      />
      <van-button
        plain
        type="primary"
        class="deleteAdd"
        @click="deleteAdd(index)"
        >删除</van-button
      >
    </div>

    <div class="chooseTreaty">
      <van-checkbox v-model="treatyChecked" shape="square" class="handleChoose"
        >同意</van-checkbox
      >
      <span class="treaty">
        <a href="#">《计研云用户协议》</a>
        <a href="#">《计研云隐私政策》</a>
        <a href="#">《计研云内容发布管理规定》</a>
      </span>
    </div>
    <van-button
      type="primary"
      size="large"
      class="submitApprove"
      @click="submitAll"
      >提交</van-button
    >
  </div>
</template>
<script>
import {
  Button,
  Field,
  Checkbox,
  CheckboxGroup,
  CellGroup,
  Cell,
  Image,
  Uploader
} from 'vant'
import 'vant/lib/index.less'

export default {
  components: {
    [Button.name]: Button,
    [Field.name]: Field,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Image.name]: Image,
    [Uploader.name]: Uploader
  },
  data () {
    return {
      personName: '',
      personNumber: '',
      approveIntro: '',
      approveIntroMessage: '',
      CheckboxTag: ['一', '二', '三', '四', '五'],
      chooseResult: [],
      telNum: '',
      nickName: '',
      treatyChecked: false,
      addToApprove: [],
      veryCode: '',
      imgSrc: 'https://img01.yzcdn.cn/vant/cat.jpeg'
    }
  },
  methods: {
    toggle (index) {
      this.$refs.checkboxes[index].toggle()
    },
    checkBoxToggle (index) {
      console.log('---------------点击的复选框的索引------------------')
      console.log(index)
    },
    uploaderHeadImg (file) {
      // 此时可以自行将文件上传至服务器
      console.log('-----------------选择的头像图片-----------------')
      console.log(file)
    },
    uploaderIdentCardRight (file) {
      console.log('-----------------选择的身份证正面图片-----------------')
      console.log(file)
    },
    uploaderIdentCardLeft (file) {
      console.log('-----------------选择的身份证背面图片-----------------')
      console.log(file)
    },
    addTo () {
      // 生成一个1到100之间（包括1和100）的随机数
      const num = Math.floor(Math.random() * 100 + 1)
      this.addToApprove.push({
        id: num,
        addToMessage: ''
      })
    },
    deleteAdd (index) {
      this.addToApprove.splice(index, 1)
    },
    submitAll () {
      console.log('-------------点击提交了--------------')
    }
  }
}
</script>
<style scoped lang="less">
.personalApprove {
  font-size: 14px;
  color: #646566;
  .topTitle {
    border-bottom: 1px solid #c8c8c8;
    line-height: 45px;
    font-size: 18px;
    font-weight: 700;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
    color: black;
  }

  .approveTitle {
    flex: none;
    box-sizing: border-box;
    width: 16.2em;
    margin-right: 12px;
    text-align: left;
    word-wrap: break-word;
    padding: 10px 16px;
    line-height: 30px;
    .approveTitleTip {
      font-size: 10px;
      color: #c8c8c8;
    }
  }

  .approveTagGroup {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    padding: 0 16px;
    margin-bottom: 10px;

    .approveTagCellGroup {
      display: flex;
      flex-direction: row;
      flex-flow: row wrap;
      text-align: start;

      .approveTagCell {
        white-space: nowrap;
        word-break: break-all;
        width: 30%;

        .approveTagIcon {
          margin-left: 4px;
          width: 300px;
        }
      }
    }
  }

  .headImg {
    display: flex;
    padding: 20px 16px 10px;

    .head {
      white-space: nowrap;
      margin-right: 40px;
    }

    .img {
      margin-right: 20px;
      width: 150px;
      height: 100px;
    }

    .btnTip {
      display: flex;
      flex-direction: column;
      padding-top: 10px;

      .btn {
        display: block;
        width: 70px;
      }

      .tip {
        font-size: 12px;
        text-align: start;
        margin-top: 20px;
        color: #c8c8c8;
      }
    }
  }

  .identityCardImg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .sideImg {
      width: 80%;
    }

    .handleTip {
      margin-bottom: 20px;
    }
  }

  .addToFile {
    display: flex;
    padding: 10px 16px;

    .addToFileTitle {
      padding-right: 16px;
      white-space: nowrap;
    }

    .addToFileBtn {
      white-space: nowrap;
    }

    .addToFileTip {
      text-align: start;
      margin-left: 20px;
      font-size: 12px;
      color: #c8c8c8;
    }
  }

  .clickAddTo {
    display: flex;
    padding: 0 16px 0 0;
    margin: 10px 0;
    align-items: center;

    .addFileImg {
      padding: 10px 16px;
      white-space: nowrap;
    }

    .img {
      width: 200px;
    }

    .deleteAdd {
      white-space: nowrap;
    }
  }

  .chooseTreaty {
    display: flex;
    padding: 10px 16px;
    margin: 20px 0;

    .handleChoose {
      white-space: nowrap;
      margin-right: 20px;
    }

    .treaty {
      text-align: start;
      width: 80%;

      a {
        outline: none;
        color: black;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        text-decoration: none;
        font-size: 14px;
        color: #646566;
      }
    }
  }

  .submitApprove {
    margin-bottom: 40px;
    width: 80%;
  }
}
</style>
